<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between">
                <div>
                    <el-input placeholder="请输入学生注册名称进行搜索，可以直接回车搜索..." prefix-icon="el-icon-search"
                              clearable
                              @clear="initRegistry"
                              style="width: 350px;margin-right: 10px" v-model="keyword"
                              @keydown.enter.native="initRegistry" :disabled="showAdvanceSearchView"></el-input>
                    <el-button icon="el-icon-search" type="primary" @click="initRegistry" :disabled="showAdvanceSearchView">
                        搜索
                    </el-button>
                    <el-button type="primary" @click="showAdvanceSearchView = !showAdvanceSearchView">
                        <i :class="showAdvanceSearchView?'fa fa-angle-double-up':'fa fa-angle-double-down'"
                           aria-hidden="true"></i>
                        高级搜索
                    </el-button>
                </div>
                <div>
                </div>
            </div>
            <transition name="slide-fade">
                <div v-show="showAdvanceSearchView"
                     style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px;">
                    <el-row style="margin-top: 10px">
                        <el-col :span="5">
                            所属部门:
                            <el-popover
                                    placement="right"
                                    title="请选择部门"
                                    width="200"
                                    trigger="manual"
                                    v-model="popVisible2">
                                <el-tree default-expand-all :data="institutes" :props="defaultProps"
                                         @node-click="searchViewHandleNodeClick"></el-tree>
                                <div slot="reference"
                                     style="width: 130px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;margin-left: 3px"
                                     @click="showDepView2">{{inputInstituteName}}
                                </div>
                            </el-popover>
                        </el-col>
                        <el-col :span="5" :offset="4">
                            <el-button size="mini">取消</el-button>
                            <el-button size="mini" icon="el-icon-search" type="primary" @click="initRegistry('advanced')">搜索</el-button>
                        </el-col>
                    </el-row>
                </div>
            </transition>
        </div>
        <div style="margin-top: 10px">
            <el-table
                    size="mini"
                    :data="registrys"
                    stripe
                    border
                    v-loading="loading"
                    element-loading-text="正在加载..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        type="selection"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="studentName"
                        label="学生姓名"
                        fixed
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="studentNo"
                        align="center"
                        label="学生学号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="major"
                        label="专业"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="institute.instituteName"
                        width="120"
                        align="center"
                        label="所属学院">
                </el-table-column>
                <el-table-column
                        prop="className"
                        width="110"
                        align="center"
                        label="班级">
                </el-table-column>
                <el-table-column
                        prop="avatar"
                        width="120"
                        align="center"
                        label="头像(查看大图)">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 70px;height: 70px;border-radius: 70px"
                                class="table-td-thumb"
                                :src="scope.row.avatar"
                                :preview-src-list="[scope.row.avatar]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="telephone"
                        width="120"
                        align="center"
                        label="电话号码">
                </el-table-column>
                <el-table-column
                        prop="grade"
                        width="100"
                        align="center"
                        label="年级">
                </el-table-column>
                <el-table-column
                        prop="email"
                        width="120"
                        align="center"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        prop="createDate"
                        width="100"
                        align="center"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        width="120"
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showEditRgistryView(scope.row)" style="padding: 3px" type="primary" size="normal">编辑</el-button>
                        <el-button @click="deleteRegistry(scope.row)" style="padding: 3px" size="normal" type="danger">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
            <div>
                <el-form style="margin-left: 30px" :rules="rules" ref="registryForm" :model="registry" label-width="80px">
                    <el-row style="margin-top: 20px;">
                        <el-col :span="6">
                            <el-form-item label="学号" prop="studentNo">
                                <el-input class="input-style" placeholder="请输入学号" disabled v-model="registry.studentNo"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 70px">
                            <el-form-item label="姓名" prop="studentName">
                                <el-input class="input-style" disabled v-model="registry.studentName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 40px;">
                        <el-col :span="6">
                            <el-form-item label="专业" prop="major">
                                <el-input class="input-style" placeholder="请输入专业" v-model="registry.major"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 70px">
                            <el-form-item label="选择学院" prop="instituteId">
                                <el-select style="width: 170px" v-model="registry.instituteId" placeholder="请选择">
                                    <el-option
                                            v-for="item in institutes"
                                            :key="item.id"
                                            :label="item.instituteName"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 40px">
                            <el-form-item label="班级" prop="className">
                                <el-input class="input-style" placeholder="请输入班级" v-model="registry.className"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 40px">
                        <el-col :span="6">
                            <el-form-item label="年级" prop="grade">
                                <el-select v-model="registry.grade" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 50px">
                            <el-form-item label="手机号" prop="telephone">
                                <el-input style="width: 190px" placeholder="请输入电话号码" disabled v-model="registry.telephone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin-left: 62px">
                            <el-form-item label="邮箱" prop="email">
                                <el-input class="input-style" placeholder="请输入邮箱" disabled v-model="registry.email"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="doAddRegistry">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "registryBasic",
        data() {
            return {
                fileList: [],
                searchValue: {
                    instituteId: null,
                },
                title: '',
                importDataBtnText: '导入数据',
                importDataBtnIcon: 'el-icon-upload2',
                importDataDisabled: false,
                showAdvanceSearchView: false,
                institutes: [],
                registrys: [],
                loading: false,
                popVisible: false,
                popVisible2: false,
                dialogVisible: false,
                total: 0,
                page: 1,
                keyword: '',
                size: 10,
                inputInstituteName: '所属部门',
                registry: {
                    studentNo: "",
                    studentName: "",
                    password: "",
                    major: '',
                    instituteId: "",
                    className: '',
                    grade: '',
                    telephone: '',
                    email: '',
                    avatar: '',
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                rules: {
                    studentNo: [{required: true, message: '请输入学号', trigger: 'blur'}],
                    studentName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    major: [{required: true, message: '请输入专业名称', trigger: 'blur'}],
                    instituteId: [{required: true, message: '请选择学院', trigger: 'blur'}],
                    className: [{required: true, message: '请输入班级', trigger: 'blur'}],
                    grade: [{required: true, message: '请选择年级', trigger: 'blur'}],
                    telephone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
                    email: [{required: true, message: '请输入电子邮件', trigger: 'blur'}],
                },
                options: [{
                    value: '选项1',
                    label: '大一'
                }, {
                    value: '选项2',
                    label: '大二'
                }, {
                    value: '选项3',
                    label: '大三'
                }, {
                    value: '选项4',
                    label: '大四'
                }],
                value: ''
            }
        },
        mounted() {
            this.initRegistry();
            this.initData();
        },
        methods: {
            searchViewHandleNodeClick(data) {
                this.inputInstituteName = data.name;
                this.searchValue.instituteId = data.id;
                this.popVisible2 = !this.popVisible2
            },
            onError(err, file, fileList) {
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataDisabled = false;
            },
            onSuccess(resonse, file, fileList) {
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataDisabled = false;
                this.initRegistry();
            },
            beforeUpload() {
                this.importDataBtnText = '正在导入';
                this.importDataBtnIcon = 'el-icon-loading';
                this.importDataDisabled = true;
            },
            emptyRegistry() {
                this.registry = {
                    studentNo: "",
                    studentName: "",
                    password: "",
                    major: '',
                    instituteId: "",
                    className: '',
                    grade: '',
                    telephone: '',
                    email: '',
                    avatar: '',
                }
                this.inputInstituteName = '';
            },
            showEditRgistryView(data) {
                this.title = '编辑学生注册信息';
                this.registry = data;
                this.inputInstituteName = data.institute.instituteName; //需要单独处理
                this.dialogVisible = true;
            },
            deleteRegistry(data) {
                this.$confirm('此操作将永久删除【' + data.studentName + '】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/student/registry/" + data.id).then(res => {
                        if (res) {
                            this.initRegistry();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            doAddRegistry() {
                if (this.registry.id) {
                    this.$refs['registryForm'].validate(valid => {
                        if (valid) {
                            this.putRequest("/student/registry/", this.registry).then(res => {
                                if (res) {
                                    this.dialogVisible = false;
                                    this.initRegistry();
                                }
                            })
                        }
                    });
                } else {
                    this.$refs['registryForm'].validate(valid => {
                        if (valid) {
                            this.postRequest("/student/registry/", this.registry).then(res => {
                                if (res) {
                                    this.dialogVisible = false;
                                    this.initRegistry();
                                }
                            })
                        }
                    });
                }
            },
            handleNodeClick(data) {
                this.inputInstituteName = data.name;
                this.registry.instituteId = data.id;
                this.popVisible = !this.popVisible
            },
            showDepView() {
                this.popVisible = !this.popVisible
            },
            showDepView2() {
                this.popVisible2 = !this.popVisible2
            },
            initData() {
                /*有时未及时更新 可以把判断直接去掉重新获取新的数据 再存入缓存 */
                if (!window.sessionStorage.getItem("institutes")) {
                    this.getRequest('/student/registry/institutes').then(res => {
                        if (res) {
                            this.institutes = res;
                            window.sessionStorage.setItem("institutes", JSON.stringify(res));
                        }
                    })
                } else {
                    this.institutes = JSON.parse(window.sessionStorage.getItem("institutes"));
                }
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initRegistry();
            },
            currentChange(currentPage) {
                this.page = currentPage;
                this.initRegistry();
            },
            showAddRegistryView() {
                this.emptyRegistry();
                this.title = '添加学生注册信息';
                this.dialogVisible = true;
            },
            initRegistry(type) {
                this.loading = true;
                let url = '/student/registry/?page=' + this.page + '&size=' + this.size;
                if (type && type === 'advanced') {
                    if (this.searchValue.instituteId) {
                        url += '&id=' + this.searchValue.instituteId;
                    }
                } else {
                    url += "&studentName=" + this.keyword;
                    console.log(url)
                }
                this.getRequest(url).then(res => {
                    this.loading = false;
                    if (res) {
                        this.registrys = res.data;
                        this.total = res.total;
                    }
                });
            }
        }
    }
</script>

<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }

    #el-upload-style{
        height: 36px;
    }
    .upload-demo{
        float: left;
        margin-left: 300px;
        margin-top: 10px;
    }
</style>
